<template>
  <div>
    <div
      id="main"
      :style="{ width: '800px', height: '600px', padding: '50px' }"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import request from "../../utils/request";
export default {
  data() {
    return {
      newArr: [],
      shopsId:'',
    };
  },
  mounted() {
    this.shopsId=localStorage.getItem('shopAdminId')

    let myChart = echarts.init(document.getElementById("main"));
    myChart.setOption({
      title: {
        text: "商品价格"
      },


      
axisLabel :{
    interval:0,
    rotate:'45',
     },

      tooltip: {},
      legend: {
        data: ["价格"]
      },
      xAxis: {
        data: []
      },

      yAxis: {},
      series: [
        {
          name: "价格",
          type: "bar",
          barMaxWidth: "45%",
          color: ["#409EFF"],
          data: []
        }
      ]
    });
console.log(this.shopsId);
if(this.shopsId){
request.get("/goods/all/"+this.shopsId).then((res) => {
      console.log(res,'res')
      let nameArr = res.map(item=>item.name.substring(0,5));
      console.log(nameArr,'nameArr');
      let priceArr = res.map(item => item.price);
      myChart.setOption({
        xAxis: {
          data: nameArr
        },
        series: [
          {
            // 根据名字对应到相应的系列
            name: "价格",
            data: priceArr
          }
        ]
      });
    });
}
    
  }
};
</script>

<style lang="scss" scoped>
</style>